<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>任务清单</title>
	<script src="jquery.min.js"></script>
	<style>
		#box{
			width: 400px;
			margin: 0 auto;
		}
		#hide{
			width: 400px;
			height: 400px;
			background: #1c94c4;
			border: 1px solid;
		}
	</style>
</head>
<body>
<div id="box">
	<input type="text" value="" id="list-value" style="width: 300px" >
	<input type="button" value="添加任务" id="add">

	<div class="lists">
		<div><input type="checkbox"><span>明天去吃小龙下</span></div>
	</div>
	<hr>
	<div id="hide">

	</div>

</div>
<script>
	$("#add").click(function () {
		// 获取文本框内容
			var va1 = $('#list-value').val();
		if(va1 !=''){
			// 创建任务列表
			var lists = '<div><input type="checkbox" id="t2"><span>'+va1+'</span></div>';
			// 添加任务列表
			$(".lists").prepend(lists);

			$("#t2").on('click',function () {
				var v=$(this).next().html();
				var o = '<div><s>'+v+'</s></div>';
				$('#hide').prepend(o);

				$(this).parent().remove();
			});


			// 添加完成后将文本框内容清空
			$("#list-value").val('');
		}else {
			alert('任务不能为空')
		}

	});

</script>
</body>
</html>